<template>
  <div class="cont">
    <div class="orderNav">
      <van-tabs v-model="active">
        <van-tab title="全部">
          <div class="allList">
            <!-- <div class="list">
              <div class="orderList">
                <div class="state">已付款</div>
              </div>
              <list></list>

              <div class="total">
                <div class="totalNum">共4件商品</div>
                <div class="cost"> 合计:￥39.9</div>
                <div class="cancel-btn">取消订单</div>
                <div class="ok-btn">确认</div>
            </div>
            </div> -->
          </div>
        </van-tab>

        <van-tab title="待付款">
          <div class="allList">
            <div class="list">
              <status />
            </div>
          </div>

          <div class="allList">
            <div class="list">
              <!-- <div class="info">
                        <div class="infoTitle"><img src="@/assets/address-icon.png" alt="">收货信息</div>
                        <div class="orderAdd">
                            <div class="orderName">付多哈哈</div>
                            <div class="orderTel">18203692335</div>
                        </div>
                        <div class="address">陕西省西安市碑林区创新设计中心11F1106室有安米科技有限公司</div>
                    </div> -->
              <itemtitle />
              <addressinfo />
            </div>
          </div>

          <div class="allList">
            <div class="list">
              <div class="info">
                <div class="infoTitle"><img src="@/assets/order-icon.png" alt="">订单信息</div>
                <list />
                <div class="sumInfo">
                  <div class="sum">
                    <div>商品金额</div>
                    <div>¥159.6</div>
                  </div>
                  <div class="freight">
                    <div>运费</div>
                    <div>+¥0.00</div>
                  </div>
                </div>
                <div class="amount">
                  <div class="amountTitle">合计</div>
                  <div class="money">¥159.6</div>
                </div>
              </div>
            </div>
          </div>

          <div class="serveBtn"><img src="@/assets/serve-icon.png" alt=""><span>客户服务</span></div>

          <div class="allList">
            <div class="list">
              <div class="indent">
                <div class="orderId">订单编号：<span>10005101168</span></div>
                <div class="orderTime">创建时间：<span>2019-10-22 14:40:05</span></div>
              </div>
              <div class="indent-group">
                <div class="cancel-btn">取消订单</div>
                <div class="ok-btn">付款</div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待发货">
          <div class="allList">
            <div class="list">
              <div class="orderStatus">
                <div class="orderShow">订单状态：<span>买家已付款，等待商家发货</span></div>
              </div>
            </div>
          </div>

          <div class="allList">
            <div class="list">
              <!-- <div class="info">
                        <div class="infoTitle"><img src="@/assets/address-icon.png" alt="">收货信息</div>
                        <div class="orderAdd">
                            <div class="orderName">付多哈哈</div>
                            <div class="orderTel">18203692335</div>
                        </div>
                        <div class="address">陕西省西安市碑林区创新设计中心11F1106室有安米科技有限公司</div>
                    </div> -->
              <itemtitle />
              <addressinfo />
            </div>
          </div>

          <div class="allList">
            <div class="list">
              <div class="info">
                <div class="infoTitle"><img src="@/assets/order-icon.png" alt="">订单信息</div>
                <list />
                <div class="sumInfo">
                  <div class="sum">
                    <div>商品金额</div>
                    <div>¥159.6</div>
                  </div>
                  <div class="freight">
                    <div>运费</div>
                    <div>+¥0.00</div>
                  </div>
                </div>
                <div class="amount">
                  <div class="amountTitle">合计</div>
                  <div class="money">¥159.6</div>
                </div>
              </div>
            </div>
          </div>

          <div class="serveBtn"><img src="@/assets/serve-icon.png" alt=""><span>客户服务</span></div>

          <div class="allList">
            <div class="list">
              <div class="indent">
                <div class="orderId">订单编号：<span>10005101168</span></div>
                <div class="orderTime">创建时间：<span>2019-10-22 14:40:05</span></div>
                <div class="payTime">支付时间：<span>2019-10-22 14:40:05</span></div>
                <div class="payWay">支付方式：<span>微信支付</span></div>
              </div>
              <div class="indent-group">
                <div class="ok-btn">申请退款</div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待收货">
          <div class="allList">
            <div class="list">
              <div class="orderStatus">
                <div class="orderShow">订单状态：<span>商家已发货</span></div>
              </div>
            </div>
          </div>

          <!-- <div class="allList">
                <div class="list"> -->
          <!-- <div class="info">
                        <div class="infoTitle"><img src="@/assets/address-icon.png" alt="">收货信息</div>
                        <div class="orderAdd">
                            <div class="orderName">付多哈哈</div>
                            <div class="orderTel">18203692335</div>
                        </div>
                        <div class="address">陕西省西安市碑林区创新设计中心11F1106室有安米科技有限公司</div>
                    </div> -->
          <itemtitle />
          <addressinfo />
          <!-- </div>
            </div> -->

          <div class="allList">
            <div class="list">
              <div class="info">
                <div class="infoTitle"><img src="@/assets/order-icon.png" alt="">订单信息</div>
                <list />
                <div class="sumInfo">
                  <div class="sum">
                    <div>商品金额</div>
                    <div>¥159.6</div>
                  </div>
                  <div class="freight">
                    <div>运费</div>
                    <div>+¥0.00</div>
                  </div>
                </div>
                <div class="amount">
                  <div class="amountTitle">合计</div>
                  <div class="money">¥159.6</div>
                </div>
              </div>
            </div>
          </div>

          <div class="serveBtn"><img src="@/assets/serve-icon.png" alt=""><span>客户服务</span></div>

          <div class="allList">
            <div class="list">
              <div class="indent">
                <div class="orderId">订单编号：<span>10005101168</span></div>
                <div class="orderTime">创建时间：<span>2019-10-22 14:40:05</span></div>
                <div class="payTime">支付时间：<span>2019-10-22 14:40:05</span></div>
                <div class="payWay">支付方式：<span>微信支付</span></div>
                <div class="deliver">发货时间：<span>2019-10-22 14:40:05</span></div>
                <div class="track">物流单号：<span>1005891071</span></div>
              </div>
              <div class="indent-group">
                <div class="hint">发货后不可申请退款，有问题请联系客服</div>
                <div class="ok-btn cannot">申请退款</div>
              </div>
            </div>
          </div>
        </van-tab>

        <van-tab title="已完成">
          <div class="allList">
            <div class="list">
              <div class="orderStatus">
                <div class="orderShow">订单状态：<span>商品已签收，交易完成</span></div>
              </div>
            </div>
          </div>

          <div class="allList">
            <div class="list">
              <!-- <div class="info">
                        <div class="infoTitle"><img src="@/assets/address-icon.png" alt="">收货信息</div>
                        <div class="orderAdd">
                            <div class="orderName">付多哈哈</div>
                            <div class="orderTel">18203692335</div>
                        </div>
                        <div class="address">陕西省西安市碑林区创新设计中心11F1106室有安米科技有限公司</div>
                    </div> -->
              <itemtitle title="收货信息">
                <addressinfo />
              </itemtitle>

            </div>
          </div>

          <div class="allList">
            <div class="list">
              <div class="info">
                <div class="infoTitle"><img src="@/assets/order-icon.png" alt="">订单信息</div>
                <list />
                <div class="sumInfo">
                  <div class="sum">
                    <div>商品金额</div>
                    <div>¥159.6</div>
                  </div>
                  <div class="freight">
                    <div>运费</div>
                    <div>+¥0.00</div>
                  </div>
                </div>
                <div class="amount">
                  <div class="amountTitle">合计</div>
                  <div class="money">¥159.6</div>
                </div>
              </div>
            </div>
          </div>

          <div class="serveBtn"><img src="@/assets/serve-icon.png" alt=""><span>客户服务</span></div>

          <div class="allList">
            <div class="list">
              <div class="indent">
                <div class="orderId">订单编号：<span>10005101168</span></div>
                <div class="orderTime">创建时间：<span>2019-10-22 14:40:05</span></div>
                <div class="payTime">支付时间：<span>2019-10-22 14:40:05</span></div>
                <div class="payWay">支付方式：<span>微信支付</span></div>
                <div class="deliver">发货时间：<span>2019-10-22 14:40:05</span></div>
                <div class="track">物流单号：<span>1005891071</span></div>
              </div>
              <div class="indent-group">
                <div class="hint">发货后不可申请退款，有问题请联系客服</div>
                <div class="ok-btn cannot">申请退款</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import list from '@/components/list'
import status from '@/components/status'
import addressinfo from '@/components/item/item-addressinfo'
import itemtitle from '@/components/item/item-title'
export default {
  components: {
    list: list,
    status: status,
    addressinfo,
    itemtitle
  },
  data() {
    return {
      active: 3
    }
  }
}
</script>

<style lang="less">
.cont {
  width: 100%;
  // min-height: 90vh;
  .van-tab {
    flex-basis: 20% !important;
  }
  .allList {
    // width: 100%;
    // padding: 3vw 4vw 1vw;
    // background: #f5f6f8;
    // box-sizing: border-box;
    // .list {
    //   width: 100%;
    //   background: #fff;
    //   padding: 10px 0;
    //   box-sizing: border-box;
    //   border-radius: 6px;
    //   margin-bottom: 10px;
    //   .pic {
    //     width: 80px;
    //     height: 80px;
    //     overflow: hidden;
    //     img {
    //       width: 100%;
    //     }
    //   }
    //   .orderList {
    //     width: 100%;
    //     .state {
    //       border-bottom: 1px solid;
    //       text-align: right;
    //       color: #D63A54;
    //       padding: 2px 5px;
    //     }
    //   }
    //   .weight{
    //         color: #999999;
    //         font-size: 14px;
    //         padding-top: 5px;
    //     }
    //     .num{
    //         text-align: right;
    //         padding-top: 5px;
    //     }
    //   .all {
    //     margin-top: 3px;
    //     display: flex;
    //     justify-content: space-around;
    //     border-bottom: 1px solid #E5E5E5;
    //     padding: 10px;
    //   }

    // }
    //     .total{
    //       padding: 10px 0;
    //       font-size: 14px;
    //       display: flex;
    //       justify-content: space-around;
    //       align-items: center;
    //       .cost{
    //           text-align: right;
    //           display: block;
    //       }
    //       .cancel-btn{
    //           padding: 5px;
    //           box-sizing: border-box;
    //           border: 1px solid #999;
    //           text-align: center;
    //           font-size: 12px;
    //           color: #999;
    //       }
    //       .ok-btn{
    //           padding: 5px 15px;
    //           box-sizing: border-box;
    //           border: 1px solid #D63A54;
    //           text-align: center;
    //           font-size: 12px;
    //           color: #D63A54;
    //       }
    //   }
  }
//   .orderStatus{
//       display: flex;
//       justify-content: space-between;
//       align-items: center;
//       padding: 3px 15px;
//       .orderShow{
//           font-size: 14px;
//           span{
//               color: #D63A54;
//           }
//       }
//       .orderBtn{
//          padding: 5px 15px;
//          box-sizing: border-box;
//          border: 1px solid #D63A54;
//          text-align: center;
//          font-size: 12px;
//          color: #D63A54;
//       }
//   }
//   .info{
//       .infoTitle{
//           display: flex;
//           align-items: center;
//           padding:5px;
//           border-bottom: 1px solid #E5E5E5;
//           img{
//               width: 15px;
//               padding: 3px 10px;
//           }
//       }
//       .orderAdd{
//           display: flex;
//           padding: 3px 20px;
//           .orderTel{
//               text-align: right;
//               width: 150px;
//           }
//           .orderName{
//               color: #333333;
//               font-weight: bold;
//           }
//       }
//       .address{
//           padding: 3px 20px;
//           font-size: 14px;
//       }
//   }
  .sumInfo{
          padding:5px;
          border-bottom: 1px solid #E5E5E5;
          .sum,.freight{
             display: flex;
             justify-content: space-between;
             padding: 5px;
          }
  }
  .amount{
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;
      .amountTitle{
          color: #999;
      }
      .money{
          color: #D63A54;
          font-size: 18px;
      }
  }
  .serveBtn{
      width: 92%;
      margin: 0 auto;
      padding: 10px 0;
      text-align: center;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      span{
          padding-left: 5px;
          font-size: 16px;
      }
  }
  .indent{
       padding: 10px;
       border-bottom: 1px solid #E5E5E5;
       font-size: 16px;
       color: #999;
       .track span{
           color: #D63A54;
       }
    }
    .indent-group{
        display: flex;
        justify-content: flex-end;
        padding-top: 10px;
        .cancel-btn{
              padding: 5px;
              box-sizing: border-box;
              border: 1px solid #999;
              text-align: center;
              font-size: 12px;
              color: #999;
       }
       .ok-btn{
              padding: 5px 15px;
              box-sizing: border-box;
              border: 1px solid #D63A54;
              text-align: center;
              font-size: 12px;
              color: #D63A54;
              margin-left: 10px;
          }
        .hint{
            font-size: 14px;
            color: #999999;
        }
        .cannot{
            color: #999;
            border: 1px solid #999;
            text-decoration:line-through;
        }
    }

}
</style>
